<template>
  <div>
    <el-input v-model="treeName" :disabled="true">
      <el-button slot="append" icon="el-icon-s-grid" @click="openModal"/>
    </el-input>
    <tree-modal ref="treeModel" :dataTree="dataTree" :treeTitle="treeTitle" :treeId="treeId" :props="props"
                :isLazy="isLazy" @ok="handleOK"/>
  </div>
</template>
<script>
    import TreeModal from './TreeModal'

    export default {
        name: 'treeSingleSelect',
        components: {
            TreeModal
        },
        watch: {
            treeVal(newVal, oldVal) {
                this.treeName = newVal
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            dataTree: {
                type: Array,
                required: false
            },
            width: {
                type: Number,
                default: 500,
                required: false
            },
            value: {
                type: String,
                default: '',
                required: false
            },
            treeVal: {
                type: String,
                default: '',
                required: false
            },
            treeId: {
                type: String,
                default: '',
                required: false
            },
            treeTitle: {
                type: String,
                default: '',
                required: false
            },
            disabled: {
                type: Boolean,
                required: false,
                default: false
            },
            isLazy: {
                type: Boolean,
                default: false
            },
            props: {
                type: Object,
                default: function () {
                    return {
                        label: 'label',
                        children: 'children',
                        isLeaf: 'isLeaf'
                    }
                }
            }
        },
        data() {
            return {
                visible: false,
                treeName: ''
            }
        },
        methods: {
            openModal() {
                this.$refs.treeModel.show(this.value, this.treeName)
            },
            handleOK(id, name) {
                // 更新父组件绑定值
                this.treeName = name
                this.$emit('saveTreeId', id)
            }
        }
    }
</script>
<style scoped>
</style>


